<template>
  <div class="pageContainer">
    <div style="display: flex;align-items: center;justify-content: space-between;">
      <h3>场景库</h3>
      <div style="display: flex;">
        <div class="titleBasicButton" style="margin-right: 8px;" type="primary" @click="toCreatePage">
          <img
              src="@/assets/svg/add-white.svg" alt="">
          <div>新建</div>
        </div>
        <!-- 暂时隐藏 -->
        <!-- <div class="titleWhiteButton">
          <img src="@/assets/svg/import.svg"
               alt="">
          <div>批量导入</div>
        </div> -->
      </div>
    </div>
    <div style="margin-top:31px;max-width: 1275px">
      <div style="display: flex;flex-wrap: wrap;margin-bottom: 16px;">
        <div class="formItem">
          <div class="formLabel">场景编号:</div>
          <el-input v-model="param.channelNo" placeholder="请输入场景编号" class="inputType"/>
        </div>
        <div class="formItem">
          <div class="formLabel">场景名称:</div>
          <el-input v-model="param.name" placeholder="请输入场景名称" class="inputType"/>
        </div>
        <div class="formItem">
          <div class="formLabel">联系电话:</div>
          <el-input v-model="param.contact" placeholder="请输入联系电话" class="inputType"/>
        </div>
        <div class="formItem" style="margin-right: 0;">
          <div class="formLabel">联系人:</div>
          <el-input v-model="param.contactName" placeholder="请输入联系人" class="inputType"/>
        </div>
      </div>
      <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
        <div style="display: flex;flex-wrap: wrap;">
          <div class="formItem">
            <div class="formLabel">所在城市:</div>
            <el-select v-model="param.city" class="inputType">
              <el-option
                  v-for="item in cityOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="display: flex;flex-wrap: wrap;">
          <div class="basicSearchLightBtn" style="margin-left: 40px;" @click="searchData">
            <img src="@/assets/svg/white-search.svg"  alt="">
            <div>查询</div>
          </div>
          <div class="basicSearchBtn" style="margin-left: 8px;" @click="reset">
            <img src="@/assets/svg/reset.svg"  alt="">
            <div>重置</div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top:16px;">
      <el-table :data="tableData" fit style="width: 100%;">
        <el-table-column
            prop="channelNo"
            label="场景编号">
        </el-table-column>
        <el-table-column
            label="场景信息"
           >
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;padding-right: 30px;">
              <div class="overText">{{ scope.row.name }}</div>
              <el-button type="text" class="basicColorStyle" style="font-weight: 400;margin-left: 8px;"
                         @click="getCompanyDetail(scope.row)">
                查看
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="联系人"
        >
          <template slot-scope="{row}">
            <div style="display: flex;align-items: center;color: #333333">
              <img v-if="row.gender === 1"
                   src="@/assets/svg/male.svg"
                   class="genderSvg"/>
              <img v-else
                   src="@/assets/svg/female.svg"
                   class="genderSvg"/>
              {{ row.contactName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="联系电话"
            prop="contact"
        >
        </el-table-column>
        <el-table-column
            label="城市"
            prop="city"
        >
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="{row}">
            <el-button type="text" class="basicColorStyle" @click="handleEdit(row)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-popconfirm
                title="确定删除吗？"
                @onConfirm="handleDeleteChannel(row)"
            >
              <el-button slot="reference" type="text" class="warningColor">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="display: flex;justify-content: space-between;margin-top:38px;">
      <el-pagination
          style="margin-left: auto;"
          @current-change="handleSizeChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"></el-pagination>
    </div>
    <SetTag v-if="showSetTag" :id="targetInfo.channelNo" kind="channel" :tags="targetInfo.tags"
            @close="handleClose"></SetTag>
    <el-dialog
        title="场景信息"
        :visible.sync="showCompanyInfoSync"
        width="30%"
        :fullscreen="fullscreen"
        center>
      <div>
        <div class="formItem" style="margin-bottom: 16px;">
          <div class="formLabel">名称</div>
          <div class="formLabel">{{ targetInfo.name }}</div>
        </div>
        <div class="formItem" style="margin-bottom: 16px;">
          <div class="formLabel">场景信息</div>
          <div class="formLabel">{{ targetInfo.ticketInfo }}</div>
        </div>
        <div class="formItem">
          <div class="formLabel">场景地址</div>
          <div class="formLabel">{{ targetInfo.address }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {deleteChannel, getAllCityList, getChannelList} from "@/api/channel";
import SetTag from "@/components/SetTag/SetTag.vue";

export default {
  components: {SetTag},
  name:"Channel",
  data() {
    return {
      tableData: [],
      showSetTag: false,
      showCompanyInfoSync: false,
      total: 0,
      cityOption: [],
      pageSize: 10,
      pageNo: 1,
      param: {
        channelNo: '',
        contact: '',
        name: '',
        tradeType: null,
        contactName: '',
        city: null
      },
      targetInfo: {},

    }
  },
  computed: {
    fullscreen() {
      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
      return /Mobi|Android/i.test(userAgent);
    }
  },
  created() {
    this.getTableData()
  },
  mounted() {
    this.getCity()
  },
  methods: {
    handleClose() {
      this.showSetTag = false
      this.getTableData()
    },
    handleShowTag(e) {
      this.showSetTag = true
      this.targetInfo = e
    },
    showText(e) {
      if (e < 1) {
        return Math.ceil(e * 100) + "%"
      } else {
        return e
      }
    },
    handleDeleteChannel(e) {
      deleteChannel({id: e.id}).then(res => {
        if (res) {
          this.$message.success('删除成功')
          this.getTableData(true)
        }
      })
    },
    handleEdit(e) {
      this.$router.push({
        path: '/createChannel',
        query: {
          title: '编辑场景',
          data: JSON.stringify(e)
        }
      })
    },
    toCreatePage() {
      this.$router.push({path: '/createChannel', query: {title: '新建场景'}})
    },
    handleSizeChange(e) {
      this.pageNo = e
      this.getTableData()
    },
    getCompanyDetail(e) {
      this.targetInfo = e
      this.showCompanyInfoSync = true
    },
    reset() {
      this.resetParam()
      this.getTableData()
    },
    resetParam() {
      this.param = {
        channelNo: '',
        contact: '',
        name: '',
        tradeType: null,
        contactName: '',
        city: null
      }
      this.pageNo = 1;
    },
    searchData() {
      this.pageNo = 1
      this.getTableData()
    },
    getTableData(init = false) {
      if (init) {
        this.resetParam()
      }
      const requestParam = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        param: this.param
      }
      getChannelList(requestParam).then(res => {
        if (res) {
          this.total = res.count
          this.tableData = res.list
        }
      })
    },
    getCity() {
      getAllCityList().then(res => {
        const resultOption = res.map(x => ({label: x, value: x}))
        this.cityOption = [{label: '全部', value: null}, ...resultOption]
      })
    }
  }
}
</script>
<style scoped lang="scss">
.pageContainer {
  padding: 10px 32px;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.formLabel {
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  text-align: center;
  margin-right: 8px;
  white-space: nowrap;
}

.inputType {
  width: 232px;
  height: 40px;
  ::v-deep.el-input__inner {
    color: #333333 !important;
  }
}

.formItem {
  display: flex;
  align-items: center;
  margin-right: 40px;
}

.genderSvg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 8px;
}


.overText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}


</style>
